<script>
import {
    defineComponent,
    ref,
    watch,
    reactive,
    computed,
    nextTick,
    onMounted,
} from "vue";
import { getAllInvest } from "~/api";
import { useRouter } from "vue-router";
export default defineComponent({
    setup(props) {
        const formData = reactive({
            pageNum: 0,
            pageSize: 20,
            total: 0,
            address: "",
            orderType: 1,
            team: 0,
            fromTime: (
                new Date("2023-12-20 00:00:00").getTime() / 1000
            ).toFixed(0),
            toTime: (new Date().getTime() / 1000).toFixed(0),
            time: [new Date("2023-12-20 00:00:00"), new Date()],
        });
        const loading = ref(false);
        const list = ref([]);
        const InvestDayList = ref([
            {
                name: "预赛",
                id: 1,
            },
            {
                name: "半决赛",
                id: 15,
            },
            {
                name: "决赛",
                id: 30,
            },
            {
                name: "总决赛",
                id: 90,
            },
            {
                name: "加时赛",
                id: 0,
            },
        ]);
        const Sum = ref({});
        const onSubmit = async () => {
            loading.value = true;
            try {
                const res = await getAllInvest(formData);
                list.value = res.data.data.InvestList;
                formData.total = res.data.data.Total;
                Sum.value = res.data.data;
            } catch (error) {}
            loading.value = false;
        };
        const ChangeTime = (date, datas) => {
            formData.fromTime = (date[0].getTime() / 1000).toFixed(0);
            formData.toTime = (date[1].getTime() / 1000).toFixed(0);
            onSubmit();
        };
        const handleSizeChange = (val) => {
            formData.pageSize = val;
            formData.pageNum = 0;
            onSubmit();
        };
        const handleCurrentChange = (val) => {
            formData.pageNum = val - 1;
            onSubmit();
        };
        onMounted(() => {
            onSubmit();
        });
        return {
            formData,
            loading,
            list,
            InvestDayList,
            Sum,
            onSubmit,
            handleSizeChange,
            handleCurrentChange,
            ChangeTime,
        };
    },
});
</script>
<template>
    <div>
        <el-form ref="form" :model="formData" label-width="40px" :inline="true">
            <el-form-item label="排序">
                <el-select v-model="formData.orderType" placeholder="请选择" @change="onSubmit">
                    <el-option label="顺序" :value="0"> </el-option>
                    <el-option label="倒序" :value="1"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker v-model="formData.time" type="daterange" unlink-panels range-separator="To" start-placeholder="Start date" end-placeholder="End date" @change="ChangeTime" />
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formData.team" placeholder="请选择" @change="onSubmit">
                    <el-option label="个人" :value="0"> </el-option>
                    <el-option label="团队" :value="1"> </el-option>
                    <el-option label="工作室" :value="2"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="地址">
                <el-input v-model="formData.address" placeholder="请输入地址" style="width: 360px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <!-- <el-button type="warning" @click="exportExcel" :loading="loadingExcel"
          >导出excel</el-button
        > -->
            </el-form-item>
        </el-form>
        <div class="total">预赛 <span>{{ Sum.SumInvest1 }} </span>半决赛 <span>{{ Sum.SumInvest15 }} </span>决赛 <span>{{
            Sum.SumInvest30 }} </span> 总决赛 <span>{{
                Sum.SumInvest90 }} </span></div>
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="UserId" width="70" label="用户ID"> </el-table-column>
            <el-table-column prop="Address" label="用户地址" width="250">
            </el-table-column>
            <el-table-column prop="InvestAmount" label="数量" width="110">
            </el-table-column>
            <el-table-column prop="InvestDay" label="类型" width="100">
                <template #default="scope">
                    <p>
                        {{ InvestDayList.find(item => item.id == scope.row.InvestDay)?.name || '加时赛' }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="Status" label="状态" width="100">
                <template #default="scope">
                    <p :style='{ color: [" #e6a23c", "#409eff", "#67c23a", "#f56c6c"][scope.row.Status] }'>
                        {{ !scope.row.Status ? "有效" : "已到期" }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="CreatedAt" label="创建时间" min-width="160">
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>
<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}

.total {
    padding: 10px 0;
    font-size: 16px;

    span {
        margin-right: 15px;
        color: rgb(245, 108, 108);
    }
}

a {
    color: #1989fa;
}
</style>